<mat-card class="mt10">
  <mat-card-content>
    <div fxLayout="row" fxLayoutAlign="start center">
      <span class="title">{{'时间类型'|translate}}</span>
      <mat-radio-group [(ngModel)]="timeType">
        <mat-radio-button value="day" [checked]="true" color="primary" class="mr8">{{'日趋势'|translate}}</mat-radio-button>
        <mat-radio-button value="month" color="primary">{{'月趋势'|translate}}</mat-radio-button>
      </mat-radio-group>
    </div>
    <div class="mt15" fxLayout="row" fxLayoutAlign="start center">
      <span class="title" *ngIf="timeType=='day'">{{'日期选择' |translate}}</span>
      <span class="title" *ngIf="timeType=='month'">{{'月份选择' |translate}}</span>

      <div *ngIf="timeType=='day'">
        <my-date-picker  class="dateBoxPicker" name="mydate" #mydp="mydatepicker" [options]="myDatePickerOptions" (dateChanged)="onDateChanged($event,'begin')" [(ngModel)]="dayModel.begin"></my-date-picker>
        <span class="html-space" style="margin-top:13px;">~</span>
        <my-date-picker class="dateBoxPicker" name="mydate" #mydp1="mydatepicker" [options]="myDatePickerOptions" (dateChanged)="onDateChanged($event,'end')" [(ngModel)]="dayModel.end"></my-date-picker>
      </div>

      <div *ngIf="timeType=='month'">
        <mat-form-field style="width: 120px;">
          <mat-select  [(ngModel)]="monthDate.begin">
            <mat-option *ngFor="let begin of monthSelectList" [value]="begin.date">{{begin.value}}</mat-option>
          </mat-select>
        </mat-form-field>
        <span class="html-space" style="margin-top:19px;">~</span>
        <mat-form-field style="width: 120px;">
          <mat-select  [(ngModel)]="monthDate.end">
            <mat-option *ngFor="let end of monthSelectList" [value]="end.date_end">{{end.value}}</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </div>
    <div class="pt15">
      <a mat-raised-button color="primary" (click)="search()">{{'检索'|translate}}</a>
    </div>
  </mat-card-content>
</mat-card>
